Quedan unas horas para el nuevo año, un año que todos esperamos con ilusión y la esperanza que se cumplan esos deseos que quedaron en el camino durante este año que termina.
Os deseo que este nuevo año sea generoso con todos y que la felicidad, salud, amor, trabajo y PAZ estén presentes cada instante.
Suscribirse a entradas ATOM ocultar o cambiar por una imagen |
|
▼ |
Eliminar texto o enlaces que no vemos útiles en el blog es parte de la personalización. Quizás sea ese uno de los temas que más me gustan, la de personalizar o cambiar el aspecto del blog y que bueno tener la posibilidad de poder hacerlo.
Una de esas cosas que tenemos prisa por cambiar es el texto-enlace que nos ofrece la posibilidad de suscribirnos y está al final del blog algo así:Normalmente decimos ocultarlo y para ello nos limitamos a buscar en los estilos lo siguiente y añadiendo lo marcado en negrita:
.feed-links {
clear: both;
line-height: 2.5em;
visibility:hidden;
display:none;
display:none;
}
Con la llegada de las nuevas plantillas el proceso era el mismo sólo que se reflejaba de forma distinta con la misma solución.
.blog-feeds, .post-feeds {
margin: 1em 0;
text-align: center;
color: $(feed.text.color);
visibility:hidden;
display:none;
display:none;
}
En lugar de ocultar esa parte podemos darle un aspecto distinto y mostrar una imagen o texto recordando que pueden suscribirse a nuestras entradas.
Nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla.
Buscamos lo siguiente:
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data:f.feedType/>) </a>
</b:loop>
</div>
</b:includable>
Sustituimos lo marcado en negrita por un texto cualquiera, una imagen o las dos cosas:
Suscribirse a las entradas <img src='url-imagen'/>
El resultado sería algo así:
No es nada del otro mundo pero se ve distinto como más personal ¿no?
Y seguimos decorando |
|
▼ |
Aunque ya estamos llegando casi al final de la Navidad y quien más quien menos tiene decorado su blog no puedo dejar pasar esta oportunidad de mostrar la idea de Blogger Plugins añadir unas campanitas en cada extremo del blog y un efecto muy sutil de nieve.
Las dos cosas las podemos añadir con un simple click si accedemos a su blog y marcamos sobre el widget que él mismo ha preparado gracias a jQuery.
Si lo preferimos también podemos añadirlo accediendo a nuestro blog y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadiremos lo siguiente:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9X1tbvo8it1t_nWeIEnD0-imDhW_whdFOie4IAae5Ij9mGWOasrhb_mvFg_bMMZgTfVV03YgiPUQtaa1Xq15IsjCC_dAYld3FYRt7fkZ2sHWdE6NFOrhlyUzilDIX82DZ_ze6/s1600/christmas-bells-icon.png' style='position:absolute; top: 0px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijf5cAIuhUeIbTOtGRli7vNImQEkXoM2Oz-iYM7bw4S8KwDZlrFmTRuHwtjJvbMoOROyIkvwSRpP0wV6pviPodQAvTyuBynVP41l65VvFUhSBUUvz0wzrJQQg_pPU75lgcnoyt/s1600/christmas-bells-icon-right.png' style='position:absolute; top: 0px;right:0px;border:none;'/>")); </script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
La url de las imágenes marcadas en negrita las podemos sustituir por cualquier otra.
El almacén de los regalos perdidos |
|
▼ |
Si Noel pasó y olvidó dejar algún regalo el siguiente vídeo les mostrará a los niños donde están esos juguetes que nunca llegaron..
Ideal para estos días que los peques están en casa
Feliz Navidad 2010 |
|
▼ |
Que esta Navidad sea el principio de un sin fin de buenos momentos.
¡¡Feliz Navidad!!
¡¡Feliz Navidad!!
Curiosidades en cristal |
|
▼ |
Fuentes navideñas |
|
▼ |
Wallpapers Navidad 2010 |
|
▼ |
Un Slide muy atractivo con jQuery |
|
▼ |
En Codrops cada actualización es un reto, uno se pierde entre tanta maravilla y cuesta decidirse por algo concreto, son efectos muy llamativos y en algunos casos pueden llegar a eclipsar el contenido. Si de lo que se trata es precisamente de eso, de atraer la vista a un sitio concreto o impresionar entonces seguro encontraremos lo ideal.
Y lo ideal en este caso es un slide, o mejor dicho un gran slide. Impresionante ¿verdad? pues está todo muy bien explicado pero aún así vamos a intentar simplificar las cosas.Para añadir este slide hay que tener en cuenta dos cosas, la primera es el tamaño y eso quiere decir que nuestro blog no debe tener en outer-wrapper menos de 902px de ancho (width) si mide más no hay problema.
El otro punto a tener en cuenta son las imágenes, el ejemplo contiene imágenes de Tucia son imágenes que visualmente parecen divididas en dos pero se puede añadir cualquier otra imagen siempre que tenga el mismo tamaño de las utilizadas.
Antes de comenzar es bueno saber que se utilizan cinco tamaños distintos de imágenes. En este archivo encontraremos las imágenes que se utilizaron y podemos tomar nota de los tamaños para crear nuestras propias imágenes.
El slide está compuesto de 5 áreas de distinto tamaño y cada área contiene 3 imágenes distintas y las 3 del mismo tamaño. A simple vista muestra 5 imágenes cuando en realidad llega a mostrar hasta 15.
Una vez tenemos nuestras imágenes preparadas nos situamos en plantilla edición de html y añadimos justo antes de </head> los estilos del slide
<style type='text/css'>
.hs_container{
position:relative;
width:902px;
height:471px;
overflow:hidden;
clear:both;
border:2px solid #fff;
cursor:pointer;
-moz-box-shadow:1px 1px 3px #222;
-webkit-box-shadow:1px 1px 3px #222;
box-shadow:1px 1px 3px #222;
}
.hs_container .hs_area{
position:absolute;
overflow:hidden;
}
.hs_area img{
position:absolute;
top:0px;
left:0px;
display:none;
}
.hs_area img.hs_visible{
display:block;
z-index:9999;
}
.hs_area1{
border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
border-top:2px solid #fff;
}
.hs_area4{
border-right:2px solid #fff;
}
.hs_area3{
border-top:2px solid #fff;
}
.hs_area1{
width:449px;
height:334px;
top:0px;
left:0px;
}
.hs_area2{
width:451px;
height:165px;
top:0px;
left:451px;
}
.hs_area3{
width:451px;
height:167px;
top:165px;
left:451px;
}
.hs_area4{
width:192px;
height:135px;
top:334px;
left:0px;
}
.hs_area5{
width:708px;
height:135px;
top:334px;
left:194px;
}
</style>
A continuación pegamos jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Si ya estamos utilizando jQuery omitimos ese paso y añadimos jquery.easing.1.3.js lo descargamos y subimos a nuestro servidor para añadirlo a continuación de este modo:
<script src='url-de-tu-archivo-jquery.easing.1.3.js' type='text/javascript'/>
O si lo preferimos copiamos el contenido del script y lo añadimos de esta forma:
<script type='text/javascript'>
//<![CDATA[
Aquí añadimos el contenido de jquery.easing.1.3.js
//]]>
</script>
Para terminar con los scripts copiamos el contenido de este otro archivo y lo pegamos a continuación del anterior tal y como se presenta.
Por último lo más entretenido añadir las imágenes.
Para saber donde incluir cada imagen nos fijaremos que las áreas van numeradas del 1 al 5 y las imágenes indican la posición y el área a la que pertenecen. Este sería un ejemplo de area1.
<div class="hs_area hs_area1">
<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>
<img src="Url-imagen/area1/2.jpg" alt=""/>
<img src="Url-imagen/area1/3.jpg" alt=""/>
</div>
Comenzamos con las imágenes, en un gadget de HTML añadimos lo siguiente:
<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>
<img src="Url-imagen/area1/2.jpg" alt=""/>
<img src="Url-imagen/area1/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area2">
<img class="hs_visible" src="Url-imagen/area2/1.jpg" alt=""/>
<img src="Url-imagen/area2/2.jpg" alt=""/>
<img src="Url-imagen/area2/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area3">
<img class="hs_visible" src="Url-imagen/area3/1.jpg" alt=""/>
<img src="Url-imagen/area3/2.jpg" alt=""/>
<img src="Url-imagen/area3/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area4">
<img sclass="hs_visible" src="Url-imagen/area4/1.jpg" alt=""/>
<img src="Url-imagen/area4/2.jpg" alt=""/>
<img src="Url-imagen/area4/3.jpg" alt=""/>
</div>
<div class="hs_area hs_area5">
<img class="hs_visible" src="Url-imagen/area5/1.jpg" alt=""/>
<img src="Url-imagen/area5/2.jpg" alt=""/>
<img src="Url-imagen/area5/3.jpg" alt=""/>
</div>
</div>
En un principio parece complicado pero de tantos slider que he probado es uno de los más sencillos, y como siempre podemos ver el resultado de todo lo anterior.
Christmas - iconos navideños |
|
▼ |
Más fuentes para descargar |
|
▼ |
Jose a secas sabe que me gustan las fuentes y en parte es una afición que me viene de él y que descubrí cuando hice mis primeros intentos con Gimp. No tenemos lo que se dice una comunicación frecuente pero cada vez que descubrimos una nueva fuente inmediatamente nos ponemos en contacto y nos la mandamos no sin antes presumir un poco por haberla descubierto
Esta vez fue su turno y me ha mandado este estupendo enlace de Francesco Mugnai donde podemos ver y descargar algunas estupendas fuentes. ¡Gracias!
Top de comentaristas en forma de nube |
|
▼ |
Si antes teníamos una nube de etiquetas ahora la podemos tener con el top de comentarios. La idea es de Blogger Sentral y según indica el recuento de comentarios se extrae de los últimos 2.000 comentarios procesados a través de un pipe. ¿Quieres saber qué es un pipe?
Para incluir la nube en nuestro blog ir a plantilla de Diseño y añadir un gadget de HTML/Javascript, en su interior incluimos lo siguiente
<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://gemablog-.blogspot.com
&Exclusions=Anonymous,Gem@
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<!-- Top Commentators Cloud End --></div>
Los cambios:- YourBlogUrl es el lugar para añadir la url de nuestro blog, sustituimos la que hay añadida por la vuestra..
- Exclusions añadimos los nombres de comentaristas que deseamos sean excluidos de la nube incluido el nuestro, lo haremos añadiendo el nombre separado de una coma.
- ShowHowMany es el número de comentaristas que se visualizará en la nube.
- Order para la frecuencia (con el más frecuente en la parte superior), si lo deseamos añadimos frequency
- Comment count es el número que contabiliza los comentarios, si no deseamos mostrarlo eliminamos la línea
El nombre de cada comentarista es un enlace a la página de su perfil y adquiere el color que tenemos definido para los enlaces.
El autor da la posibilidad de modificar el pipe conforme a las preferencias de cada uno para eso lo pone a disposición de todos
Esto es una captura del ejemplo que puede verse en el siguiente blog.
Iconos navideños |
|
▼ |
Silent Night 10 Christmas
REFERENCIA: ArtDesigner.lv
Tutorial de Adobe Photoshop para crear el árbol de Navidad.